<template>
  <view class="page">
    <view class="header">问诊回答</view>
    
    <view v-if="consultation" class="consultation-detail">
      <view class="consultation-title">{{ consultation.title }}</view>
      <view class="consultation-body">{{ consultation.description }}</view>
      <view class="consultation-category">类别: {{ consultation.category }}</view>
    </view>

    <!-- 答案表单 -->
    <view class="answer-form">
      <textarea v-model="answer" placeholder="输入您的回答"></textarea>
      <button @click="submitAnswer">提交回答</button>
    </view>

    <!-- 显示回答 -->
    <view v-if="answers.length > 0" class="answers-list">
      <view v-for="(answer, index) in answers" :key="index" class="answer">
        <view>{{ answer.text }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      consultationId: null,   // 当前问诊的ID
      consultation: null,     // 当前问诊的详细信息
      answer: '',             // 用户输入的回答
      answers: []             // 存储回答记录
    };
  },
  onLoad(options) {
    this.consultationId = options.id;
    this.fetchConsultationDetail(); // 加载问诊详情
  },
  methods: {
    fetchConsultationDetail() {
      // 这里是模拟加载数据，你可以从数据库获取
      const consultation = {
        id: this.consultationId,
        title: '如何缓解头痛？',
        description: '我最近常常感觉头痛，应该怎么办？',
        category: '头痛'
      };
      this.consultation = consultation;
    },
    submitAnswer() {
      if (this.answer) {
        this.answers.push({ text: this.answer });
        this.answer = '';  // 清空输入框
      } else {
        uni.showToast({ title: '回答不能为空', icon: 'none' });
      }
    }
  }
};
</script>

<style scoped>
.page {
  padding: 10px;
}

.header {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.consultation-detail {
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.consultation-title {
  font-size: 18px;
  font-weight: bold;
}

.consultation-body {
  font-size: 14px;
  margin-top: 10px;
}

.consultation-category {
  font-size: 12px;
  margin-top: 10px;
  color: #999;
}

.answer-form textarea {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  background-color: #3f8fe0;
  color: white;
  border-radius: 5px;
  padding: 10px 15px;
}

.answers-list {
  margin-top: 20px;
}

.answer {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
</style>
